<template>
    <div class="overall">
        <div class="goods" >
            <div class="sort_field">
                <el-cascader v-model="newGoodCatId" :options="cateList" :props="cascaderProps"  @change="handleChange" ></el-cascader>
            </div>
            <div class="goods-box">
                <mall-good v-for="(item,index) in goodslist" :key="index" :msg=item></mall-good>
            </div>
        </div>
    </div>
</template>

<script>
import mallGood from '../../../components/mallGood.vue'

export default {
    components:{
        mallGood
    },
    data(){
     return{
        cateList:[],
        newGoodCatId:'',
        cascaderProps:{
             value:'catId',
             label:'catName',
             children:'cats',
             expandTrigger: 'hover',
             checkStrictly:true,
             emitPath:false
            },
        queryInfo:{
                pagenum:1,
                pagesize:10
        },
        goodslist:[]
     }
    },
    methods:{
         //   获取商品分类数据
      async getCateList(){
          const{data:res}=await this.$http.get('rent/cat/findBypid/0');
          console.log(res);
          if(res.code!=200)
          return this.$message.error("获取商品分类失败!")
          this.cateList=res.data;
      },
      async getGoodListByCate()
      {
          const{data:res}=await this.$http.get('rent/rentalGoods/findByCatID/'+this.newGoodCatId+'/'
          +this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);  
          console.log(res)
          this.goodslist=res.data.data;
      },
        handleChange()
        {
            this.getGoodListByCate();
        },
        async getGoodsList(){
            const{data:res}=await this.$http.get('rent/rentalGoods/findByPage/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);         
            if(res.code!=200)
                return this.$message.error("获取商品列表失败!");
                console.log(res.data.data)
            this.goodslist=res.data.data;
        },
    },
    created()
    {
        this.getGoodsList();
        this.getCateList();
    }
} 
</script>

<style lang="less" scoped>
.sort_field
{
    width:1200px;
    height:40px;

    margin:15px auto;
    .el-cascader
    {
        border: 0;
        float: right;
        margin-right:42px;
        border-bottom: 3px solid #A9A9A9;

        /deep/.el-input__inner{
            border:0;
            font: 900 16px '';
            background-color: #ededed;
        }
    
    }
}
.goods-box {
    width:1200px;
    align-self: center;
    margin:0 auto;
    height:800px;
    > div {
      float: left;
      border: 1px solid #efefef;
    }
  }
</style>